<template>
  <div>
    <div class="ShopCart acea-row row-middle">
      <div class="left acea-row row-middle" @click="shopCart">
        <div
          class="pictrue animated"
          :class="cart.animated === true ? 'bounceIn' : ''"
        >
          <img src="@assets/images/doll01.png" v-if="cart.cartList.length" />
          <img src="@assets/images/doll02.png" v-else />
          <div class="num" v-if="cart.cartList.length">
            {{ cart.CartCount }}
          </div>
        </div>
        <div class="money acea-row row-center row-column">
          <div class="num" v-if="cart.cartList.length">
            ￥{{ cart.countmoney }}
          </div>
          <div class="num on" v-else>购物空空如也哦，快去添加商品吧</div>
        </div>
      </div>
      <div
        class="right"
        :class="cart.cartList.length ? '' : 'on'"
        @click="settlement"
      >
        去结算
      </div>
    </div>
    <div
      class="Popup"
      :class="cart.iShidden === false ? 'show' : ''"
      v-if="cart.cartList.length"
    >
      <div class="title acea-row row-between-wrapper">
        <div class="iconfont icon-guanbi2" @click="shopCartClose"></div>
        <div>已选商品</div>
        <div class="del acea-row row-middle" @click="delGood">
          <span class="iconfont icon-shanchu"></span>清空
        </div>
      </div>
      <div class="popupList">
        <div
          class="item acea-row row-between-wrapper"
          v-for="(item, index) in cart.cartList"
          :key="index"
        >
          <div class="picTxt acea-row row-between-wrapper">
            <div class="pictrue">
              <img
                :src="item.productInfo.attrInfo.image"
                v-if="item.productInfo.attrInfo"
              />
              <img :src="item.productInfo.image" v-else />
            </div>
            <div class="text acea-row row-column-between">
              <div>
                <div class="name line1">{{ item.productInfo.store_name }}</div>
                <div class="specs line1" v-if="item.productInfo.attrInfo">
                  属性：{{ item.productInfo.attrInfo.suk }}
                </div>
              </div>
              <div class="money font-color-orange">
                <img
                  src="@assets/images/vips.png"
                  v-if="item.vip_truePrice"
                />￥{{ item.truePrice }}
              </div>
            </div>
          </div>
          <div class="car acea-row acea-middle">
            <div
              class="iconfont icon-jian acea-row"
              :class="item.cart_num <= 1 ? 'on' : ''"
              @click="reduce(index)"
            ></div>
            <div class="num acea-row row-center-wrapper">
              {{ item.cart_num }}
            </div>
            <div
              class="iconfont icon-jia font-color-main acea-row"
              :class="
                item.cart_num >= item.productInfo.attrInfo.stock ? 'on' : ''
              "
              v-if="item.productInfo.attrInfo"
              @click.prevent="plus(index)"
            ></div>
            <div
              class="iconfont icon-jia font-color-main acea-row"
              :class="item.cart_num >= item.productInfo.stock ? 'on' : ''"
              v-else
              @click.prevent="plus(index)"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="mask"
      @touchmove.prevent
      v-bind:hidden="cart.iShidden"
      @click="shopCartClose"
    ></div>
  </div>
</template>
<style scoped>
.ShopCart {
  position: fixed;
  bottom: 0.35rem;
  width: 7.1rem;
  height: 0.97rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  z-index: 99;
}
.ShopCart .left {
  width: 5.2rem;
  background-color: #30312c;
  border-radius: 0.5rem 0 0 0.5rem;
}
.ShopCart .left .pictrue {
  width: 1.21rem;
  height: 1.1rem;
  margin: -0.4rem 0 0 0.2rem;
  position: relative;
}
.ShopCart .left .pictrue .num {
  min-width: 0.34rem;
  height: 0.34rem;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 0.34rem;
  background-color: #ff8500;
  font-size: 0.26rem;
  color: #fff;
  position: absolute;
  bottom: -0.05rem;
  right: -0.03rem;
}
.ShopCart .left .pictrue img {
  width: 100%;
  height: 100%;
}
.ShopCart .left .money {
  width: 2.89rem;
  height: 0.97rem;
  font-size: 0.22rem;
  color: #999;
  margin-left: 0.15rem;
}
.ShopCart .left .money .num {
  font-size: 0.3rem;
  color: #fff;
  margin-bottom: 0.02rem;
}
.ShopCart .left .money .num.on {
  font-size: 0.24rem;
}
.ShopCart .right {
  width: 1.9rem;
  font-size: 0.3rem;
  background-color: #00c049;
  color: #fff;
  text-align: center;
  line-height: 0.97rem;
  border-radius: 0 0.5rem 0.5rem 0;
}
.ShopCart .right.on {
  font-size: 0.3rem;
  color: #808080;
  background-color: #bfbfbf;
}
.Popup {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 66;
  background-color: #fff;
  transform: translate3d(0, 250%, 0);
  -webkit-transform: translate3d(0, 250%, 0);
  -ms-transform: translate3d(0, 250%, 0);
  -moz-transform: translate3d(0, 250%, 0);
  -o-transform: translate3d(0, 250%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  border-radius: 0.16rem 0.16rem 0 0;
  padding-bottom: 1.8rem;
}
.Popup.show {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}
.Popup .title {
  width: 100%;
  height: 0.9rem;
  background-color: #f5f5f5;
  font-size: 0.3rem;
  color: #282828;
  padding: 0 0.2rem;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-radius: 0.16rem 0.16rem 0 0;
  position: relative;
}
.Popup .title .icon-guanbi2 {
  position: absolute;
  right: 0.15rem;
  top: -0.8rem;
  font-size: 0.5rem;
  color: #fff;
}
.Popup .title .del {
  font-size: 0.28rem;
  color: #999;
}
.Popup .title .del .iconfont {
  margin: 0.05rem 0.12rem 0 0;
  font-size: 0.33rem;
}
.Popup .popupList {
  max-height: 7.9rem;
  overflow: auto;
}
.Popup .popupList .item {
  padding: 0 0.2rem;
  font-size: 0.28rem;
  height: 1.51rem;
  border-bottom: 1px solid #eaeaea;
}
.Popup .popupList .item .picTxt {
  width: 4.9rem;
}
.Popup .popupList .item .picTxt .pictrue {
  width: 1.1rem;
  height: 1.1rem;
}
.Popup .popupList .item .picTxt .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 0.06rem;
}
.Popup .popupList .item .picTxt .text {
  width: 3.56rem;
  height: 1.2rem;
}
.Popup .popupList .item .picTxt .text .name {
  width: 3.56rem;
  color: #222;
  font-size: 0.28rem;
}
.Popup .popupList .item .picTxt .text .specs {
  font-size: 0.22rem;
  color: #999;
  margin-top: 0.04rem;
}
.Popup .popupList .item .picTxt .text .money {
  font-size: 0.3rem;
}
.Popup .popupList .item .picTxt .text .money img {
  width: 0.22rem;
  height: 0.22rem;
  margin-right: 0.05rem;
}
.Popup .popupList .item .car {
  font-size: 0.28rem;
  color: #333;
  margin-top: 0.7rem;
}
.Popup .popupList .item .car .iconfont {
  font-size: 0.46rem;
}
.Popup .popupList .item .car .iconfont.icon-jian {
  color: #bfbfbf;
}
.Popup .popupList .item .car .iconfont.on {
  color: #ddd !important;
}
.Popup .popupList .item .car .num {
  width: 0.5rem;
  text-align: center;
}
</style>
<script>
export default {
  name: "ShopCart",
  components: {},
  props: {
    cart: {
      type: Object,
      default: () => {}
    }
  },
  data: function() {
    return {};
  },
  mounted: function() {},
  methods: {
    shopCart: function() {
      if (this.cart.cartList.length) {
        this.cart.iShidden = !this.cart.iShidden;
      }
    },
    shopCartClose: function() {
      this.cart.iShidden = !this.cart.iShidden;
    },
    reduce: function(index) {
      this.$emit("reduce", index);
    },
    plus: function(index) {
      this.$emit("plus", index);
    },
    delGood: function() {
      this.$emit("delGood");
    },
    settlement: function() {
      this.$emit("settlement");
    }
  }
};
</script>
